<template>
<div>
  <h1 style="background-color: aquamarine">添加广告</h1>
  <p>图片<input type="file" name="pic" id="pic"></p>
  <p>跳转链接<input type="text" v-model="from.detail"></p>
  <p>类型<input type="text" v-model="from.type"></p>
  <button @click="add">添加广告</button>
  <br>
  <h1 style="background-color: coral">展示广告</h1>
  <table>
    <tr>
      <td>图片</td>
      <td>跳转</td>
      <td>类型</td>
    </tr>
    <tr v-for="i in ad">
      <td><img :src="'http://localhost:8000' + i.pic" alt="" width="150" height="200"></td>
      <td>{{i.detail}}</td>
      <td>{{i.type}}</td>
    </tr>
    <tr>
      <td >
        <button v-for="i in tpage" :value="i.id" @click="get_ad(i)">{{i}}</button>
      </td>
    </tr>
  </table>
</div>
</template>

<script>
export default {
  name: "add_ad",
  data(){
    return{
      from: {},
      ad:[],
      tpage:0
    }
  },
  methods:{
    add(){
      let fromdata = new FormData()
      let pic = document.getElementById('pic').fiels[0]
      fromdata.append('pic',pic)
      fromdata.append('detail',this.from.detail)
      fromdata.append('type',this.from.type)
      this.$axios.post('users/ad/', fromdata)
        .then(res => {
          if (res.data.code == 200) {
            alert('添加成功')
          }else {
            alert('添加失败')
          }
        })
    },
    get_ad(p){
      this.$axios.get('users/ad/?p='+p)
      .then(res=>{
        if(res.data.code==200){
          this.ad=res.data.list
          this.tpage = res.data.tpage

        }
      })
    }
  },
  mounted() {
    this.get_ad(1)
  }
}
</script>

<style scoped>

</style>
